<template>
	<view class="retrievepass">
		<u-navbar :back-icon-size="50" :custom-back="goback"></u-navbar>
		<view class="welcome">
			<view class="weltop"><text>请输入验证码</text></view>
			<view class="welbot">
				<text>
					验证码已发送至
					<text class="u-m-l-15" style="color: #000000;">{{ phone }}</text>
				</text>
			</view>
		</view>
		<view class="retrievepass_ipt">
			<u-message-input mode="bottomLine" :focus="true" :maxlength="6" @change="change" @finish="finish"></u-message-input>
			<u-button v-show="isshow" :disabled="disabled" class="u-m-t-30" size="default" :ripple="true" :hair-line="false" :custom-style="retrievepasssty" @click="doregiste">
				重新获取
			</u-button>
			<view class="countdown" v-show="!isshow">
				<u-count-down ref="uCountDown" :timestamp="60" color="#FFDB28" :show-days="false" :show-hours="false" :show-minutes="false" @end="endtime"></u-count-down>
				秒后重新发送验证码
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'retrievepass',
	data() {
		return {
			retrievepasssty: {
				color: '#333333',
				backgroundColor: '#FFDB28',
				border: 'none'
			},
			phone: '',
			codeid: '',
			sms: '',
			phonecode: '',
			isshow: false,
			disabled: false
		};
	},
	//实例创建完成后被立即调用
	created() {},
	//实例初始化之后被调用
	beforeCreate() {},
	//挂载开始之前被调用
	beforeMount() {},
	//初次渲染完成
	onReady() {
		if (this.phone !== '' && this.sms !== '' && this.codeid !== '') {
			this.$refs.uToast.show({
				title: '获取成功!',
				type: 'success'
			});
		}
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		// console.log(option); //打印出上个页面传递的参数。
		this.phone = option.phone;
		this.codeid = option.codeid;
		this.sms = option.sms;
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		endtime: function() {
			console.log('倒计时结束');
			this.isshow = !this.isshow;
			this.disabled = false;
		},
		change: function(e) {
			// console.log('内容改变，当前值为：' + e);
		},
		finish: function(e) {
			// console.log('输入结束，当前值为：' + e);
			this.phonecode = e;
			uni.navigateTo({
				url: '/pages/login/resetpass?phone=' + this.phone + '&codeid=' + this.codeid + '&sms=' + this.sms + '&phonecode=' + e,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		goback: function() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		doregiste: function() {
			uni.showLoading({
				title: '正在获取验证码'
			});
			this.$u.api
				.getSmsCode({
					phone: this.phone,
					code_id: this.codeid,
					code: this.sms
				})
				.then(res => {
					console.log(res);
					uni.hideLoading();
					this.$refs.uCountDown.start();
					this.disabled = true;
					this.isshow = !this.isshow;
					this.$refs.uToast.show({
						title: '获取成功!',
						type: 'success'
					});
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.retrievepass {
	.welcome {
		color: rgba(16, 16, 16, 1);
		font-size: 52rpx;
		text-align: left;
		padding-top: 76rpx;
		padding-left: 56rpx;
		padding-bottom: 100rpx;
		font-weight: bolder;
		.welbot {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999999;
			font-weight: 300;
		}
	}
	.retrievepass_ipt {
		width: 640rpx;
		margin: 0 auto;
	}
	.u-form-item {
		padding: 0;
		overflow: hidden;
		padding-bottom: 25rpx;
	}
	.u-form-item__message {
		padding-left: 36rpx !important;
	}
	.u-form-item--left {
		display: none;
	}
	.smsbtn {
		width: 640rpx;
		overflow: hidden;
		.u-btn {
			padding: 0 20rpx;
		}
		.uni-input-placeholder {
			left: 0rpx;
		}
		/deep/.uni-input-input {
			text-indent: 0rpx !important;
		}
	}

	/* #ifdef MP */
	.u-form-item--left {
		display: none !important;
	}
	.smsbtn {
		/deep/.u-input__input {
			display: block;
			padding-left: 0rpx !important;
		}
		.u-flex-1 {
			margin-right: 8rpx;
		}
	}
	/* #endif */
	.actiontext {
		display: inline-block;
		height: 40rpx;
		line-height: 40rpx;
		padding-right: 20rpx;
		border-right-width: 1px;
		border-right-color: #bbbbbb;
		border-right-style: solid;
	}
}
</style>
